<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
    <style>
        .swiper-container {
            height: 300px;
        }

        .swiper-slide > img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body style="background-color: #009f95">

<div class="swiper-container">
    <!-- 轮播区域 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src=""></div>
        <div class="swiper-slide"><img src=""></div>
        <div class="swiper-slide"><img src=""></div>
        <div class="swiper-slide"><img src=""></div>
        <div class="swiper-slide"><img src=""></div>
        <div class="swiper-slide"><img src=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!--&lt;!&ndash; 如果需要导航按钮 &ndash;&gt;-->
    <!--<div class="swiper-button-prev"></div>-->
    <!--<div class="swiper-button-next"></div>-->

    <!--&lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
    <!--<div class="swiper-scrollbar"></div>-->
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.min.js"></script>
<script>
    var swiper = {};
    var sliderLen = $('.swiper-slide').length;
    swiper = new Swiper('.swiper-container', {//轮播图
//        prevButton:'.swiper-button-prev',//后退按钮的css选择器或HTML元素
//        nextButton:'.swiper-button-next',//前进按钮的css选择器或HTML元素
//        scrollbar:'.swiper-scrollbar',//Scrollbar容器的css选择器或HTML元素。
        pagination: '.swiper-pagination',//分页器（小点）
        paginationClickable: true,//分页器是否可点击
        autoplay: 5000,//自动轮播，毫秒数
        autoplayDisableOnInteraction: false,//用户手动操作后，是否停止自动轮播
        loop: true,//环路
        loopAdditionalSlides: 2,//loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
        loopedSlides: 2,//在loop模式下如果使用slidesPerview:'auto',还需使用loopedSlides参数设置所要用到的loop个数
        direction:'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。默认水平(horizontal)
        touchRatio: 0.5,//触摸距离与slide滑动距离的比率,默认：1,设置为0.5后slide滑动距离只有触摸距离的一半，降低滑动灵敏度
        lazyLoading: true,//允许图片的懒加载
        lazyLoadingInPrevNext: true,//允许将图片的懒加载应用到最接近的slide的图片（前一个和后一个slide）
        lazyLoadingOnTransitionStart: true,//图片的懒加载在过渡一开始就加载
        observer: true,//当Swiper元素变化时，例如window.resize，Swiper更新
        observeParents: true,//当Swiper的父元素变化时，例如window.resize，Swiper更新
        effect: 'coverflow',//默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）
        coverflow: {//effect: 'coverflow'的详细参数
            rotate: 60,//slide做3d旋转时Y轴的旋转角度。默认50
            stretch: 0,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
            depth: 100,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
            modifier: 1,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
            slideShadows : true//开启slide阴影。默认 true。
        },
        slidesPerView: 3,//设置slider容器能够同时显示的slides数量(分组模式),可以设置为number或者 'auto'则自动根据slides的宽度来设定数量,loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides
        spaceBetween: 0,//slide之间的距离（单位px）
        centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左
        grabCursor:true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
        mousewheelControl : true,//设置为true时，能使用鼠标滚轮控制slide滑动。
        onTap: function (swipe, event) {
        }
    });
</script>
</body>
</html>